<template>
  <div class="content-box button-demo">
    <h2 class="demo-title">PictureView 图片预览</h2>
    <p class="demo-introduction">用于图片的预览</p>

    <g-anchor>
      <g-anchor-link href="magnifier" title="放大镜" />
      <g-anchor-link href="fixScale" title="定点缩放" />
      <g-anchor-link href="api" title="API" />
    </g-anchor>

    <!-- 放大镜 -->
    <g-block-box
      title="放大镜"
      introduction="可以通过鼠标移动，并展示图片放大效果，可滚轮缩放"
      id="magnifier"
    >
      <template v-slot:demo>
        <div class="parent-el">
          <g-picture-view :bigSrc="bigSrc"/>
        </div>
      </template>
      <template v-slot:code>
        <code class="html">{{ fCode(magnifier.code) }}</code>
      </template>
    </g-block-box>

    <!-- 放大镜 -->
    <g-block-box
      title="定点缩放"
      introduction="可以通过鼠标滚轮来对鼠标所在图片当前位置放大和缩小"
      id="fixScale"
    >
      <template v-slot:demo>
        <div class="parent-el2">
          <g-picture-view previewMode="fixScale" :bigSrc="img2"/>
        </div>
      </template>
      <template v-slot:code>
        <code class="html">{{ fCode(fixScale.code) }}</code>
      </template>
    </g-block-box>

    <!-- API -->
    <div id="api">
      <h3 class="demo-table-title">Attributes</h3>
      <P class="demo-table-introduction">属性说明如下：</P>
      <g-table-simple :source="api" type="'demo'" />
    </div>
  </div>
</template>

<script>
import hhl from 'assets/images/hhl.png'
import dog from 'assets/images/dog.png'
export default {
  data() {
    return {
      bigSrc: hhl,
      img2: dog,
      magnifier: {
        code: `
          <template>
            <g-picture-view />
          </template>

          <script>
            import testCar from '../../public/images/car1.jpg'
            export default {
              data() {
                return {
                  bigSrc: testCar
                }
              }
            }
          <\/script>
        `,
      },
      fixScale: {
        code: `
          <template>
            <g-picture-view :previewMode="fixScale" isDrag/>
          </template>

          <script>
            export default {
              data() {
                return {
                  previewMode: 'fixScale'
                }
              }
            }
          <\/script>
        `,
      },
      api: [
        {
          parameter: 'bigSrc',
          description: '图片来源',
          dataTypes: 'String',
          optional: '',
          default: '',
        },
        {
          parameter: 'previewMode',
          description: '预览模式',
          dataTypes: 'String',
          optional: 'magnifier(放大镜) / fixScale(定点缩放)',
          default: 'magnifier',
        },
        {
          parameter: 'maskWidth',
          description: '遮罩宽度（previewMode为放大镜时使用）',
          dataTypes: 'Number',
          optional: '',
          default: 150,
        },
        {
          parameter: 'maskHeight',
          description: '遮罩高度（previewMode为放大镜时使用）',
          dataTypes: 'Number',
          optional: '',
          default: 150,
        },
        {
          parameter: 'maskColor',
          description: '遮罩颜色（previewMode为放大镜时使用）',
          dataTypes: 'String',
          optional: '',
          default: 'rgba(255, 255, 255, 0.5)',
        },
        {
          parameter: 'isDrag',
          description: '是否允许拖拽图片（previewMode为定点所方时使用）',
          dataTypes: 'Boolean',
          optional: 'true/false',
          default: 'false',
        }
      ],
    }
  },
}
</script>

<style lang="scss" scoped>
.parent-el {
  width: 800px;
  height: 800px;
}
.parent-el2 {
  width: 600px;
  height: 500px;
}
</style>
